<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript</title>
    <link rel="stylesheet" href="css/css.css">
    <link rel="shortcut icon" href="images/tx.jpg" type="image/x-icon">
</head>

<body>

    <div class="dibu"><a href="#zuixia"><img src="images/feiji_1.png" alt=""></a></div>
    <div class="note">
        <!-- 变量 -->
        <div class="yiye">
            <div class="style_1 style_6"><b><a href="lianxi/1.html" target="_blank">变量</a></b></div>
            <div class="style_2">
                变量就是内存里面的存储空间，是用来存储程序在运行时所需要的数据那么数据的种类很多
            </div>
            <div class="style_2">
                比如: <span class="style_3">5.55，HelloWorld</span>.
            </div>
            <div class="style_2">
                所以，就要根据数据的种类，在内存中申请合适的空间来存储对应的数据。
            </div>
            <div class="style_2">
                javascript代码必须要写到页面的script标签中，该标签可以放在页面的任何地方，
            </div>
            <div class="style_2">
                通常放到body标签的最下面，确保网页里面的DOM加载完毕后，再执行js代码
            </div>
            <div><img src="upload/1.png" alt=""></div>

            <div class="style_2">如果定义变量 定义变量的关键字是 var </div>

            <div class="style_3">var a = 100</div>

            <div class="style_2">这里的a是变量名 100是该变量存储的值</div>

            <div class="style_2"> 在js中，变量的类型由定义变量时的数据确定 </div>

            <div class="style_4"><img src="upload/2.png" alt="">
                <div class="style_5 diyi">
                    <div class="style_2">100是整型数据，所以在内存中申请的是整型空间（int）</div>
                    <div style="height: 12px;"></div>
                    <div class="style_2">在js中，整型和浮点型的类型都是number --> 存储的是int数据 </div>
                    <div class="style_2">typeof 关键字，用于查看变量的类型</div>
                    <div class="style_2">55.55是浮点数据，所以在内存中申请的是浮点型空间（float）</div>
                    <div style="height: 3px;"></div>
                    <div class="style_2">也是number -->存储的是float数据</div>
                    <div style="height: 12px;"></div>
                    <div class="style_2">true 表示真，它是布尔类型（boolean），用于表示真假。</div>
                    <div style="height: 65px;"></div>
                    <div class="style_2">false 表示假</div>
                    <div style="height: 65px;"></div>
                    <div class="style_2">""表示字符串类型（string）</div>
                    <div style="height: 65px;"></div>
                    <div class="style_2">''表示字符串类型，js不区分 '' 和 ""</div>
                </div>
            </div>
            <div class="style_2 style_6">{ } 表示定义对象(object)，对象是一组属性和方法的集合</div>
            <div><img src="upload/3.png" alt=""></div>
            <div><img src="upload/4.png" alt=""></div>

            <div class="style_2">在什么情况系，我们会选择定义变量去存储数据。</div>
            <div class="style_2">就是一份数据暂时不用，先找个空间放进去，等将来需要用的时候，再来获取。</div>
            <div class="style_2">var num1 = 10 </div>
            <div class="style_2">var num2 = 20 </div>
            <div class="style_2">怎么获取在变量里的数据：直接使用变量名，所以在同一个作用域中，不要定义同名的变量。</div>
            <div class="style_2">console.log(num1);</div>
            <div class="style_2">console.log(num2);</div>

            <!-- 变量名命名规范 -->

            <div class="style_1">变量名的命名规范</div>
            <div class="style_2">1.只能是字母 数字 _ $ 组成，不能使用其他字符。</div>
            <div class="style_2">2.数字不能开头</div>
            <div class="style_2">3.不能是js里面的关键字 比如：const let case if for while do 等等</div>
            <div class="style_2">4.多个单词组成的变量名，需要采用驼峰命名推翻，比如：myFirstName</div>
            <div class="style_2">5.变量名要有意义，比如：name age sex 就是有意义的变量名，aa bb cc abc 就是无意义的变量名</div>
        </div>

        <!-- var let const -->
        <div class="yiye">
            <div class="style_1"><b><a href="lianxi/2.html" target="_blank">var let const</a></b></div>
            <div class="style_2">用let定义变量，是从ES6开始的新语法，ES6 --> ECMAScript6 </div>
            <div><img src="upload/5.png" alt=""></div>
            <div class="style_2">var 的第一个问题，允许变量同名，后面的会将前面的覆盖。</div>
            <div><img src="upload/6.png" alt=""></div>
            <div class="style_2">var 的第二个问题，在定义变量前能使用变量</div>
            <div class="style_2">在一个作用域里面，var 定义的变量会前置作用域顶部定义</div>
            <div><img src="upload/7.png" alt=""></div>
            <div class="style_2">var 的第三个问题，无法定义局部变量，只要是var定义的变量，都会被前置到作用域的顶部定义</div>
            <div><img src="upload/8.png" alt=""></div>
            <div class="style_2">const 是定义常量，常量在定义的时候必须要赋值，并且之后不允许改变值</div>
            <div><img src="upload/9.png" alt=""></div>
            <div class="style_2">值固定不变的变量可以定义为常量，比如：域名，IP地址，后台接口等等</div>
        </div>
        <!-- 算术运算符和算术表达式 -->
        <div class="yiye">
            <div class="style_1"><b><a href="lianxi/3.html" target="_blank">算术运算符和算术表达式</a></b></div>
            <div class="style_2">加+ 减- 乘* 除/ 余%</div>
            <div><img src="upload/10.png" alt="" srcset=""></div>
            <div class="style_2">练习</div>
            <div class="style_2">算出一个4位数，每一位数相加之和的结果'</div>
            <div><img src="upload/11.png" alt="" srcset=""></div>

            <div class="style_2"> <span style="color: tomato;font-weight: 700;">parseInt()</span>
                函数的作用是：将数据强制转为整型，会去掉所有的小数点后的所有。</div>
            <div style="height: 12px;"></div>
            <div class="style_2">算术表达式的简写</div>
            <div><img src="upload/12.png" alt="" srcset=""></div>
            <div class="style_2">如果是加1或者减1，那就这样写。</div>
            <div><img src="upload/13.png" alt=""></div>
            <div class="style_2">注意：++在前和++在以后是不一样的！</div>
            <div><img src="upload/14.png" alt="" srcset=""></div>
        </div>
        <!-- 比较运算符和比较表达式 -->
        <div class="yiye">
            <div class="style_1"><b><a href="lianxi/4.html" target="_blank">比较运算符和比较表达式</a></b></div>

            <div class="style_2">比较运算符有： >&nbsp; >= &nbsp;<&nbsp; <=&nbsp;==&nbsp;!=&nbsp;===(恒等于) &nbsp;!==</div>
                    <div><img src="upload/15.png" alt="" srcset=""></div>
            </div>
            <!-- 逻辑运算符 -->
            <div class="yiye">
                <div class="style_1"><b><a href="lianxi/5.html" target="_blank">逻辑运算符</a></b></div>
                <div class="style_2">逻辑运算符包括：&&（与） || （或） ！（非）</div>
                <div class="style_2">&&(与)：是与运算符，表示并且，运算符前后都返回true，整个表达式返回true。</div>
                <div class="style_2">||(或)：是或运算符，表示或者，运算符前后有一个返回true，整个表达式返回true。</div>
                <div class="style_2">!(非)：是非运算符，表示取反，表达式返回true，取反就是false，表达式返回false，取反就是true</div>
                <div><img src="upload/16.png" alt="" srcset=""></div>

                <div class="style_2">运算符的优先级</div>
                <div class="style_2">比较运算符的优先级，高于逻辑运算符</div>
                <div class="style_2">逻辑运算符的 && 优先级 高于 ||</div>
                <div><img src="upload/17.png" alt="" srcset=""></div>
            </div>
            <!-- 消息框，输入框，确认框 -->
            <div class="yiye">

                <div class="style_1"><b><a href="lianxi/6.html" target="_blank">消息框，输入框，确认框</a></b></div>
                <div class="style_2 style_6">JavaScript的组成部分：</div>
                <div class="style_2">1. ESMAScript 核心库</div>
                <div class="style_2">2. BOM 浏览器对象模型，其实是一个window对象，该对象提供了操作浏览器的行为。</div>
                <div class="style_2">3. DOM 文档对象模型，其实就是document对象，该对象提供了操作当前网页的行为。</div>

                <div style="height: 10px;"></div>
                <div class="style_2">消息框, <span class="style_8">alert()方法</span>
                    用于弹出消息框，该方法属于window对象。</div>
                <div><img src="upload/18.png" alt=""></div>
                <div class="style_2">js的默认对象就是window对象，所以，window可以省略。</div>
                <div><img src="upload/19.png" alt=""></div>
                <div class="style_2">输入框，<span class="style_8">prompt()方法</span>用于弹出输入框，该方法会返回输入的结果，所以定义一个变量接收一下</div>
                <div><img src="upload/20.png" alt=""></div>
                <div class="style_2">注意：prompt()方法返回的值，都是以字符串的形式返回的</div>
                <div class="style_2"><span class="style_8">parseInt()方法</span>，用于将数据强转为整型</div>
                <div><img src="upload/21.png" alt=""></div>
                <div class="style_2"><span class="style_8">parseFloat()方法</span>，用于将数据强转为浮点型</div>
                <div><img src="upload/22.png" alt=""></div>
                <div><img src="upload/23.png" alt=""></div>
                <div class="style_2"><span class="style_8">isNaN()方法</span>
                    ，判断数据如果不是数字就返回true，是数字返回false</div>
                <div><img src="upload/24.png" alt=""></div>
                <div class="style_2">确认框 <span class="style_8">confirm()方法 </span></div>
                <div class="style_2">用于弹出确认框，确认框的返回值是boolean类型，点确定返回true，点取消返回false</div>
                <div><img src="upload/25.png" alt="">&nbsp;<img src="upload/26.png" alt=""></div>

                <div style="height: 20px;"></div>
            </div>
            <!-- 判断语句-if选择结构 -->
            <div class="yiye">
                <div class="style_1"><b>判断语句-if选择结构</b></div>

                <div class="style_2">if选择结构：</div>
                <div class="style_2">语法：if(条件){操作}，条件返回true，执行操作。</div>

                <div><a href="lianxi/7-1.html" target="_blank"><img src="upload/27.png" alt="" srcset=""></a></div>
                <div class="style_2">if-else选择结构：</div>
                <div class="style_2">语法：if(条件){条件成立后执行的操作}else{条件不成立执行的操作}</div>
                <div><a href="lianxi/7-2.html" target="_blank"><img src="upload/28.png" alt="" srcset=""></a></div>

                <div class="style_2"><b>嵌套if选择结构</b></div>
                <div><a href="lianxi/7-3.html" target="_blank"><img src="upload/29.png" alt="" srcset=""></a></div>

                <div class="style_2">多重if选择结构</div>
                <div class="style_2">输入成绩，输出学生的登记</div>
                <div class="style_2">90分以上，优秀。80分以上：良好。70分以上，中等。60分以上合格。60分一下，加油</div>
                <div class="style_2">if()里面的条件成立，执行{}里面的代码</div>
                <div class="style_2">if()里面的条件不成立，继续判断下面else if()里面的条件，直到有一个条件成立。</div>
                <div class="style_2">只要满足一个条件成立，就执行{}里面的代码，然后挑出整个结构。</div>
                <div class="style_2">所有的条件都不成立，执行else{}里面的代码。</div>
                <div><a href="lianxi/7-4.html" target="_blank"><img src="upload/30.png" alt="" srcset=""></a></div>

                <div class="style_2">练习：输入年份和月份，输出该月份有多少天。</div>
                <div><a href="lianxi/7-5.html" target="_blank"><img src="upload/31.png" alt="" srcset=""></a></div>

                <div class="style_2">练习2</div>
                <div><a href="lianxi/7-6.html" target="_blank"><img src="upload/32.png" alt="" srcset=""></a></div>
            </div>

            <!-- switch选择结构 -->
            <div class="yiye">
                <div class="style_1"><b>switch选择结构</b></div>
                <div class="style_2">练习：输入考试名次，第一名奖励电脑，第二名奖励手机，第三名奖励MP4，</div>
                <div class="style_2">第四名奖励MP3 否则没有奖励</div>
                <div><a href="lianxi/8-1.html" target="_blank"><img src="upload/33.png" alt="" srcset=""></a></div>
                <div class="style_2">多重if选择结构的特点是：括号太多</div>
                <div class="style_2">如果只是比较是否相等，可以采用switch选择结构</div>
                <div class="style_2">等值判断可以 选switch选择结构，判断区间选择if选择结构</div>
                <div class="style_2">语法：switch(判断的变量){case 固定值：操作 break}</div>
                <div class="style_2">break 表示挑出switch结构，</div>
                <div class="style_2">如果case1：成立，会执行case1：里面的代码</div>
                <div class="style_2">如果case1:的最下面没有break语句</div>
                <div class="style_2">程序会跳过下面的case判断 直接执行里面的代码</div>
                <div><a href="lianxi/8-2.html" target="_blank"><img src="upload/34.png" alt="" srcset=""></a></div>

                <div class="style_2">练习：输入今天的周几</div>
                <div class="style_2">1 3 5 超市面包打8折，2 4 6 超市薯片买1送1。7 全场商品打5折</div>
                <div><a href="lianxi/8-3.html" target="_blank"><img src="upload/35.png" alt="" srcset=""></a></div>
            </div>
            <!-- 三元表达式 -->
            <div class="yiye">
                <div class="style_1">三元表达式</div>
                <div class="style_2">三元表达式（？：）</div>
                <div class="style_2">？前面写判断条件，条件成立执行？后面的表达式</div>
                <div class="style_2">如果条件不成立 执行：后面的表达式</div>

                <div><a href="lianxi/9.html" target="_blank"><img src="upload/36.png" alt="" srcset="">&nbsp;<img
                            src="upload/37.png" alt="" srcset=""></a></div>
                <div class="style_2">三元表达式其实就是if else</div>
            </div>

            <!-- 模板字符串 -->
            <div class="yiye">
                <div class="style_1"><a href="lianxi/10.html" target="_blank">模板字符串</a></div>
                <div style="height: 10px;"></div>
                <div><img src="upload/38.png" alt="" srcset=""></div>
                <div class="style_2">如果拼接的内容较多时，很容易拼错。</div>
                <div class="style_2">可以采用模板字符串的方式简化拼接的过程</div>
                <div><img src="upload/39.png" alt=""></div>
                <div class="style_2">模板字符串就是一对反引号``，在里面通过 ${表达式} 的方式输出语句</div>
                <div><img src="upload/40.png" alt="" style="width: 100%;"></div>
                <div class="style_2">需要拼接的变量太多，反复用+号拼接，容易出错。</div>
                <div class="style_2">当拼接的变量太多时，建议用模板字符串的方式</div>
                <div><img src="upload/41.png" alt=""></div>
                <div class="style_2">在模板字符串可以更好的输出'' "" ，并且不容易出错</div>
                <div class="style_2"></div>
            </div>
            <!-- while循环 -->
            <div class="yiye">
                <div class="style_1"><a href="lianxi/11.html" target="_blank">while循环</a></div>
                <div><img src="upload/42.png" alt=""></div>
                <div class="style_2">采用while循环打印信息</div>
                <div><img src="upload/43.png" alt=""></div>
                <div class="style_2">定义循环变量，()里面设置循环的条件，条件成立，执行{}里面的操作</div>
                <div class="style_2">执行完{}里面的操作后，还会重新判断循环条件，如果条件成立，继续执行操作。</div>
                <div><img src="upload/44.png" alt=""></div>
                <div class="style_2">循环练习1</div>
                <div class="style_2">累加100以内所有的偶数之和 并打印输出</div>
                <div><img src="upload/45.png" alt=""></div>
                <div class="style_2">循环练习2</div>
                <div class="style_2">找出从2000年到2020年之间的所有瑞年，并输出</div>
                <div><a href="lianxi/11-1.html" target="_blank"><img src="upload/46.png" alt=""></a></div>

                <div class="style_1">do-while循环</div>
                <div><a href="lianxi/11-2.html" target="_blank"><img src="upload/47.png" alt=""></a></div>
                <div class="style_2">当循环的条件一开始就不成立，while循环一次都不执行 do-while循环会执行一次。</div>
                <div class="style_2">所以，do-while循环没有入口条件，无论循环条件是否成立，都要执行一次循环操作。</div>
                <div style="height: 12px;"></div>
                <div class="style_2">do-while循环的使用场合</div>
                <div><a href="lianxi/11-3.html" target="_blank"><img src="upload/48.png" alt=""
                            style="width: 100%;"></a></div>
                <div class="style_2">要根据输入的值来确定是否循环的时候就可以使用do-while循环</div>
                <div class="style_2">注意：no的值一开始就是0，循环的条件是no!==0,但是这里是do-while循环，没有入口判断</div>
                <div class="style_2">第一no的值为多少都行。</div>

            </div>
            <!-- for循环 -->
            <div class="yiye">
                <div class="style_1">for循环</div>
                <div class="style_2">while循环的问题是：必须要在循环的外面定义循环变量，必须要在循环的里面对循环变量重新赋值</div>
                <div><img src="upload/49.png" alt=""></div>
                <div class="style_2">所以，for循环，将循环变量，判断条件，循环变量重新赋值，放在一起写</div>
                <div class="style_2">好处是，不容易忘记其中任意一部分</div>
                <div><img src="upload/50.png" alt=""></div>
                <div class="style_2">当循环的次数固定的时候，建议用for循环，不固定用while或者do-while</div>
                <div style="height: 12px;"></div>
                <div class="style_2">练习：循环输出5遍 平生至此欢喜是你（固定次数）</div>
                <div><a href="lianxi/12-1.html" target="_blank"><img src="upload/51.png" alt=""></a></div>

                <div class="style_2">for循环练习：</div>
                <div class="style_2">ATM取款机</div>
                <div><a href="lianxi/12-2.html" target="_blank"><img src="upload/52.png" alt=""></a></div>
                <div class="style_2">for循环练习 猜数字：</div>
                <div><a href="lianxi/12-3.html" target="_blank"><img src="upload/for.png" alt=""></a></div>


            </div>

            <!-- 练习题 -->
            <div class="yiye">
                <div class="style_1">练习题</div>
                <div class="style_2"> 1. 利用循环找出3位数里面的所有的水仙花数</div>
                <div class="style_2"> 百位数的3次方 + 十位数的三次方 + 个位数的三次方 === 这个数</div>
                <div class="style_2"> 三位数的范围：100~999</div>
                <div><a href="lianxi/13-1.html" target="_blank"><img src="upload/53.png" alt=""></a></div>
                <div class="style_2"> 2. 输出今天的年月日 和 你出生日期的年月日 算出你活了多少天</div>
                <div><a href="lianxi/13-2.html" target="_blank"><img src="upload/54.png" alt=""></a></div>
                <div class="style_2 style_7">
                    <a href="lianxi/13-3.html" target="_blank" class="bulu">前面代码有bug修改bug后(附带星宫星座)</a>
                </div>
                <div class=" style_2">3.输入年月日 输出该日期是星期几 提示：1900-1-1是星期一</div>
                <div><a href="lianxi/14.html" target="_blank"><img src="upload/55.png" alt=""></a></div>
            </div>

            <!-- continue和break -->
            <div class="yiye">
                <div class="style_1"><a href="lianxi/15.html" target="_blank">continue和break</a></div>
                <div><img src="upload/56.png" alt=""></div>
                <div class="style_2">continue 表示跳过当前这次循环，还会继续执行后面的循环</div>
                <div class="style_2">循环输出30以内能被3整除的数，遇到能被7整除的数，循环结束</div>
                <div><img src="upload/57.png" alt=""></div>
                <div class="style_2">break 是跳出整个循环 continue 是跳出那一次循环</div>
                <div><img src="upload/58.png" alt=""></div>
            </div>

            <!-- 双重循环 -->
            <div class="yiye">

                <div class="style_1">双重循环</div>
                <div class="style_2">有3个班级，每个班级有3名学生，统计每个班级所有学生的平均分</div>
                <div><a href="lianxi/16-1.html" target="_blank"><img src="upload/59.png" alt=""></a></div>
                <div class="style_2">在二层循环中 ，外层循环变量变化一次，内存循环变量变化一遍</div>

                <div class="style_2">练习 打印5*5的矩形图案</div>
                <div><img src="upload/60.png" alt=""></div>
                <div class="style_2">练习 打印直角三角形</div>
                <div><img src="upload/61.png" alt=""></div>
                <div class="style_2">练习 打印99乘法表</div>
                <div><img src="upload/62.png" alt=""></div>
                <div class="style_2">练习 打印每行列数是：1 3 5 7 9的直角三角形</div>
                <div class="style_2">每行的列数是当前行号的两倍减1</div>
                <div><img src="upload/63.png" alt=""></div>
                <div class="style_2">练习 打印倒直角三角形</div>
                <div><img src="upload/64.png" alt=""></div>
                <div class="style_2">打印每行列数是: 1,3,5,7,9的等腰三角形</div>
                <div><img src="upload/65.png" alt=""></div>
                <div class="style_2">倒等腰3角形</div>
                <div><img src="upload/66.png" alt=""></div>
                <div class="style_2"><a href="lianxi/16-2.html" target="_blank">双重循环打印图形.html</a></div>

                <div style="height: 12px;"></div>
                <div class="style_2">双重循环练习</div>
                <div><a href="lianxi/16-3.html" target="_blank"><img src="upload/67.png" alt=""></a></div>

                <div class="style_2">鸡兔同笼，有35个头，94只脚，请问鸡多少只，兔多少只？</div>
                <div class="style_2">兔子最多多少只 ——> 23只 鸡最多多少只 ——> 35只</div>
                <div><a href="lianxi/17.html" target="_blank"><img src="upload/68.png" alt=""></a></div>


                <div class="style_2">百钱买百鸡，公鸡5元一只，母鸡3元一只，小鸡1元一只（不单卖，3只起卖）</div>
                <div class="style_2">请问 公鸡，母鸡，小鸡，各多少只？</div>
                <div class="style_2">公鸡最多多少只 20只 母鸡最多33只 小鸡最多100只 </div>
                <div><a href="lianxi/17.html" target="_blank"><img src="upload/69.png" alt=""></a></div>

                <div class="style_2">找出100以内的所有质数</div>
                <div class="style_2">质数：只能被1或者自身整除的数</div>
                <div><a href="lianxi/17.html" target="_blank"><img src="upload/70.png" alt=""></a></div>
            </div>
            <!-- Math对象 -->
            <div class="yiye">
                <div class="style_1"><a href="lianxi/18.html" target="_blank">Math对象</a></div>
                <div class="style_2">Math对象-->数学对象</div>
                <div class="style_2">random()方法，用于返回0-1之间的随机数，注意：能取到0，取不到1</div>
                <div><img src="upload/71.png" alt=""></div>
                <div class="style_2">返回0到9之间的数</div>
                <div><img src="upload/72.png" alt=""></div>
                <div class="style_2">返回40到100之间的数</div>
                <div><img src="upload/73.png" alt=""></div>

                <div class="style_2">round()方法，用于四舍五入</div>
                <div><img src="upload/74.png" alt=""></div>
                <div class="style_2">ceil()方法，用于向上取整，只要有小数，就往前进一位</div>
                <div><img src="upload/75.png" alt=""></div>
                <div class="style_2">floor()方法，用于向下取整，只要有效数，就去掉小数。</div>
                <div><img src="upload/76.png" alt=""></div>

                <div class="style_4"><a href="lianxi/18.html" target="_blank"><img src="upload/77.png" alt=""></a>
                    <div class="style_5 math">
                        <div>abs()方法，用于返回绝对值</div>
                        <div>pow()方法，用于算次方值</div>
                        <div>sqrt()方法，用于开平方根</div>
                        <div>Math对象的PI属性，返回圆周率</div>
                        <div>max()方法，用于返回最大值</div>
                        <div>min()方法，用于返回最小值</div>
                    </div>
                </div>
            </div>
            <!-- Array对象 -->
            <div class="yiye">
                <div class="style_1"><a href="lianxi/19.html" target="_blank">Array对象</a></div>

                <div class="style_2">回顾：什么是变量</div>
                <div class="style_2">就是在内存中开辟一个合适的空间，用于存储一份数据</div>
                <div class="style_2">什么叫合适的空间，比如数据：100和“Helloworld”不一样，所以他们所需要的空间也不一样</div>
                <div class="style_2">什么是数组？</div>
                <div class="style_2">就是在内存中开辟一段连续的空间，用于存储多分数据</div>
                <div class="style_2">有两种方式定义数据。</div>
                <div style="height: 5px;"></div>
                <div class="style_2">方式一：采用字面量赋值的方式定义数组。</div>
                <div><img src="upload/78.png" alt=""></div>
                <div class="style_2">获取数组中指定的数据，根据数组的下标(索引)，用于表示数据在数组中的位置</div>
                <div class="style_2">注意：下标从0开始</div>
                <div class="style_2">返回数组中指定下标里面保存的数据，方式是：数组对象[下标]</div>
                <div><img src="upload/79.png" alt=""></div>
                <div class="style_2">length属性，返回数组的长度</div>
                <div class="style_2">返回数组的最后一个元素 length-1（数组的长度-1，就算是数组的最后一个下标）</div>
                <div style="height: 5px;"></div>
                <div class="style_2">方式二：采用构造函数方式创建数组</div>
                <div class="style_4"><img src="upload/80.png" alt="">
                    <div class="style_5 Array">
                        <div>创建一个数组对象，还没有开辟空间</div>
                        <div>通过数组的下标给数组中指定的空间赋值</div>
                        <div>通过数组的下标给数组中的指定的空间赋值</div>
                    </div>
                </div>
                <div class="style_2">在js中，创建数组，没有必要规定长度，因为js的数组，长度会变化</div>
                <div><img src="upload/81.png" alt=""></div>
                <div class="style_2">push()方法，用于向数组的末尾添加数据</div>
                <div><img src="upload/82.png" alt=""></div>
                <div class="style_2">pop()方法，用于删除并返回数组中最后一个元素 </div>
                <div><img src="upload/83.png" alt=""></div>
                <div class="style_2">unshift()方法，用于向数组的开头添加数据</div>
                <div><img src="upload/84.png" alt=""></div>
                <div class="style_2">shift()方法，用于删除并返回数组中的第一个元素</div>
                <div><img src="upload/85.png" alt=""></div>
                <div class="style_2"> indexOf()用于从数组中查找指定的数据第一次出现的 位置（下标）</div>
                <div><img src="upload/86.png" alt=""></div>
                <div class="style_2">lastIndexOf() 方法用于从数组中查找指定的数据最后一次出现的位置</div>
                <div><img src="upload/87.png" alt=""></div>
                <div class="style_2">slice()方法，返回数组中指定区间的数据</div>
                <div class="style_2">第一个参数是起始下标，第二个参数是结束下标</div>
                <div class="style_2">能取到起始位置，取不到结束位置。可以取到[3][4][5]</div>
                <div><img src="upload/88.png" alt=""></div>
                <div class="style_2">slice()方法，如果只传1个参数，表示从其实位置往后全部返回</div>
                <div><img src="upload/89.png" alt=""></div>
                <div class="style_2">如果结束位置超出数组长度，也是直接返回放到最后。</div>
                <div><img src="upload/90.png" alt=""></div>
                <div class="style_2">splice()方法，用于删除数组中指定长度的数据</div>
                <div class="style_2">该方法的第一个参数是起始位置，第二个参数是删除长度</div>
                <div><img src="upload/91.png" alt=""></div>
                <div class="style_2">includes()方法，用于从数组中查找指定的数据是否存在，存在返回true，否则返回false</div>
                <div><img src="upload/92.png" alt=""></div>
                <div class="style_2">join()方法，用于将数组根据指定的字符串进行连接并返回一个字符串</div>
                <div><img src="upload/93.png" alt=""></div>
                <div class="style_2">reverse()方法，用于翻转数组中的数据</div>
                <div class="style_2">sort()方法，用于对数组中的数据排序</div>
                <div><img src="upload/94.png" alt=""></div>
                <div class="style_2">concat()方法，用于对两个数组中的数据拼接，并返回新的数组</div>
                <div><img src="upload/95.png" alt=""></div>
                <div class="style_2">toString()方法，用于将数组中的数据用，拼接成字符串</div>
                <div class="style_2">toString()方法===join(',')</div>
                <div class="style_2">join()方法，可以不传参数，默认就是根据逗号拼接数组中的数据</div>
                <div class="style_2"><a href="lianxi/20.html" target="_blank" class="bulu">Array.html</a></div>
            </div>
            <!-- 字符串 -->
            <div class="yiye">
                <div class="style_1"><a href="lianxi/21.html" target="_blank" class="bulu">字符串</a></div>
                <div class="style_2">在js中，''和""都表示字符串，里面的内容就是字符串内容</div>
                <div><img src="upload/96.png" alt=""></div>
                <div class="style_2">可以根据下标（索引），返回字符串中指定位置的字符</div>
                <div><img src="upload/97.png" alt=""></div>
                <div class="style_2">length属性，返回字符串的长度</div>
                <div><img src="upload/98.png" alt=""></div>
                <div class="style_2">可以利用循环，输出字符串中的每一个字符</div>
                <div><img src="upload/99.png" alt=""></div>
                <div class="style_2">任何数据只要跟字符串相加就自动变成字符串</div>
                <div><img src="upload/22-1.png" alt=""></div>
                <div class="style_2">indexOf()方法，用于在字符串中，<span class="style_8">从前往后查找</span> 指定的字符串第一次出现的位置</div>
                <div class="style_2">如果找不到，返回-1</div>
                <div><img src="upload/22-2.png" alt=""></div>
                <div class="style_2">lastIndexOf()方法，用于在字符串中，<span class="style_8">从后往前查找</span> 指定的字符串 第一次出现的位置</div>
                <div class="style_2">如果找不到，返回-1</div>
                <div><img src="upload/22-3.png" alt=""></div>

                <div class="style_2">substring()方法，用于截取字符串，第一个参数是起始位置，第二个参数是结束位置</div>
                <div class="style_2">注意：能取到起始位置，取不到结束位置</div>
                <div class="style_2">字符串也有slice()方法，效果跟substring()方法是一样的</div>
                <div class="style_2">slice()方法的起始位置不能是负数，不能小于结束位置，否则无法截取字符串</div>
                <div><img src="upload/22-4.png" alt=""></div>
                <div class="style_2">注意：substring，slice，substr三个方法，如果只传1个参数</div>
                <div class="style_2">表示从起始位置往后全部截取。</div>
                <div><img src="upload/22-5.png" alt=""></div>
                <div class="style_2">startsWith()方法，用于判断字符串是否以指定的字符串开头</div>
                <div class="style_2">endsWith()方法，用于判断字符串是否以指定的字符串结尾</div>
                <div class="style_2">includes()方法，用于判断字符串是否包含指定的字符串</div>
                <div><img src="upload/22-6.png" alt=""></div>
                <div class="style_2">toLowerCase()方法，用于返回一份小写数据 不会影响原始字符串</div>
                <div class="style_2">toUpperCase()方法，用于返回一份大写数据，不会影响原始字符串</div>
                <div><img src="upload/22-7.png" alt=""></div>
                <div class="style_2">charAt()方法，是根据下标，返回字符串中指定的字符串 === str[2]</div>
                <div class="style_2">charCodeAt()方法，根据下标，返回字符串中指定字符的<a
                        href="https://baike.baidu.com/item/ASCII/309296?fromtitle=ASCII%E7%BC%96%E7%A0%81&fromid=3712529&fr=aladdin"
                        target="_blank" class="bulu">ASCII编码</a></div>
                <div><img src="upload/22-8.png" alt=""></div>
                <div class="style_2">encodeURI()方法，用于 转码汉字</div>
                <div class="style_2">decodeURI()方法，用于 解码汉字</div>
                <div><img src="upload/22-9.png" alt=""></div>
                <div class="style_2">.split()方法，用于将原始字符串 根据指定的字符串 打散成数组</div>
                <div><img src="upload/100.png" alt=""></div>
                <div class="style_2">字符串的repeat()方法，表示重复次数</div>


                <div class="style_1">string练习题</div>
                <div class="style_2">练习1：</div>
                <div class="style_2">现在有一个字符串：abcdefg,怎么翻转一下这个字符呢？</div>
                <div class="style_2">字符串有split()方法，数组有reverse()方法和join()方法</div>
                <div><img src="upload/22-10.png" alt=""></div>
                <div class="style_2">练习2：</div>
                <div class="style_2">http://www.jd.com?title=手机&type=华为&size=6000*3000*50</div>
                <div class="style_2">将字符串打散成下面格式输出</div>
                <div class="style_2">title:手机</div>
                <div class="style_2">type:华为</div>
                <div class="style_2">size:6000*3000*50</div>
                <div><img src="upload/22-11.png" alt=""></div>
                <div class="style_2">replace()用于替换原始字符串中，指定的第一个字符串</div>
                <div class="style_2">第一个参数是需要替换的字符串，第二个参数是新的字符串</div>
                <div><img src="upload/22-12.png" alt=""></div>
                <div class="style_2">练习3：</div>
                <div class="style_2">判断邮箱格式是否正确</div>
                <div class="style_2">比如：zhangsan@123.com，zhangsan@123.com.cn</div>
                <div class="style_2"> @符号后面必须有. 规则是：@不能是第一位，.符号不能是最后一位，.在@的后面而且中间至少间隔一位</div>
                <div><img src="upload/22-13.png" alt=""></div>
                <div class="style_2">练习4:</div>
                <div class="style_2">判断手机号码格式是否正确</div>
                <div class="style_2">规则是：第一位是1，第二位必须是3,5,7,8,9 其余9位必须是数字</div>
                <div class="style_2">isNaN()函数要用起来</div>
                <div><img src="upload/22-14.png" alt=""></div>
                <div class="style_2">练习5:</div>
                <div class="style_2">输入一个数字，给这段数字添加千位符</div>
                <div class="style_2">比如 输入12345 输出12,345</div>
                <div><img src="upload/22-15.png" alt=""></div>
                <div class="style_2">练习6:</div>
                <div class="style_2">随机生成双色的中奖号，并保存到数组中</div>
                <div class="style_2">双色的号码规则是 前6组号码是1-32之间不重复随机数，第7组号码是1-16之间的随机数。</div>
                <div class="style_2">提示：不重复 往二重循环上去思考</div>
                <div><img src="upload/22-16.png" alt=""></div>
                <div class="style_2">练习题：<a href="lianxi/22-1.html" target="_blank" class="bulu">&nbsp;22-1.html</a>
                    <a href="lianxi/22-2.html" target="_blank" class="bulu">&nbsp;22-2.html</a>
                    <a href="lianxi/22-3.html" target="_blank" class="bulu">&nbsp;22-3.html</a>
                    <a href="lianxi/22-4.html" target="_blank" class="bulu">&nbsp;22-4.html</a>
                    <a href="lianxi/22-5.html" target="_blank" class="bulu">&nbsp;22-5.html</a>
                </div>
            </div>
            <!-- Date对象 -->
            <div class="yiye">
                <div class="style_1">Date对象</div>
                <div><img src="upload/date_1.png" alt=""></div>
                <div class="style_2">nwe Date() 创建一个时间，返回的是当前日期</div>
                <div><img src="upload/date_2.png" alt=""></div>
                <div class="style_2">根据指定的日期创建 日期对象</div>
                <div><img src="upload/date_3.png" alt=""></div>
                <div class="style_2">根据从1970-1-1开始的毫秒数，创建日期对象</div>
                <div><img src="upload/date_4.png" alt=""></div>
                <div class="style_2">.getYear()方法，返回的是从1900年到现在的年数</div>
                <div><img src="upload/date_5.png" alt=""></div>
                <div class="style_2">.getFullYear()方法，返回日期的年份</div>
                <div><img src="upload/date_6.png" alt=""></div>
                <div class="style_2">.getMonth()方法，返回日期的月份，返回结果是0-11，0表示一月份，11表示十二月份</div>
                <div><img src="upload/date_7.png" alt=""></div>
                <div class="style_2">.getDate()方法，返回的是日期的天数</div>
                <div><img src="upload/date_8.png" alt=""></div>
                <div class="style_2">.getHours()方法，返回的是小时</div>
                <div><img src="upload/date_9.png" alt=""></div>
                <div class="style_2">.getMinutes()方法，返回的是分钟</div>
                <div><img src="upload/date_10.png" alt=""></div>
                <div class="style_2">.getSeconds()方法，返回的是秒数</div>
                <div><img src="upload/date_11.png" alt=""></div>
                <div class="style_2">.getMilliseconds()方法，返回的是毫秒</div>
                <div><img src="upload/date_12.png" alt=""></div>
                <div class="style_2">.getDay()方法，返回值是0-6,0表示星期天，</div>
                <div><img src="upload/date_13.png" alt=""></div>
                <div class="style_2">.setXXX()方法，是设置日期中的指定部分</div>
                <div style="height: 8px;"></div>
                <div class="style_2">练习</div>
                <div class="style_2">算出自己活了多少天，多少小时，多少分钟，多少秒钟，多少毫秒 </div>
                <div><img src="upload/date_14.png" alt=""></div>
                <div class="style_2">算出距离生日还剩多少秒</div>
                <div><img src="upload/date_15.png" alt=""></div>
                <div class="style_2"><a href="lianxi/Date对象.html" target="_blank" class="bulu">Date对象.html</a></div>
            </div>
            <!-- function函数 -->
            <div class="yiye">
                <div class="style_1">function 函数</div>
                <div class="style_2">function是定义方法的关键字，sayHi是方法名，()里面方参数，{}是方法体 </div>
                <div><img src="upload/function_1.png" alt=""></div>
                <div><img src="upload/function_2.png" alt=""></div>
                <div class="style_2">将代码写到方法中的好处是，方法只需要定义一次，但可以调用无数次</div>
                <div class="style_2">function定义的方法会被前置到作用域顶部定义</div>
                <div class="style_2">可以通过function(){}定义一个方法，然后将方法赋值给变量储存起来</div>
                <div><img src="upload/function_3.png" alt=""></div>

                <div class="style_2">练习：计算方法</div>
                <div class="style_2">该方法，需要传3个参数，分别是数字1，数字2，操作类型</div>
                <div class="style_2">方法的参数，可以设置默认值，调用方法是，不传，就采用默认值</div>
                <div class="style_2">有默认值的参数，必须放在后面</div>
                <div><img src="upload/function_4.png" alt=""></div>
                <div class="style_2">练习：返回一个短日期的方法</div>
                <div><img src="upload/function_7.png" alt=""></div>
                <div class="style_2">该方法用于日期为1到9时，补一个0（01,02,03,04,05,06,07,08,09）</div>
                <div><img src="upload/function_5.png" alt=""></div>
                <div class="style_2">return 关键字，用于在方法中返回一份数据</div>
                <div class="style_2">return语句下面的代码，将不会在执行</div>
                <div class="style_2">调用带返回值的方法，需要定义一个变量接收返回的值</div>
                <div><img src="upload/function_6.png" alt=""></div>

                <div class="style_2">判断是否是闰年的方法</div>
                <div><img src="upload/function_8.png" alt=""></div>
                <div class="style_2">字符串也是可以使用下标的 '1234567'[0] //1</div>
                <div><img src="upload/function_9.png" alt=""></div>
                <div class="style_4"><img src="upload/function_10.png" alt="">
                    <a href="lianxi/function冒泡排序/index.html" target="_blank">
                        <div class="style_5 function">
                            <p>冒</p>
                            <p>泡</p>
                            <p>排</p>
                            <p>序</p>
                            <p>动</p>
                            <p>画</p>
                            <p>演</p>
                            <p>示</p>
                        </div>
                    </a>
                </div>

                <div class="style_2"><a href="lianxi/function函数.html" target="_blank" class="bulu">function函数.html</a>
                </div>

            </div>
            <!-- 箭头函数 -->
            <div class="yiye">
                <div class="style_1">箭头函数</div>
                <div><img src="upload/jiantou.png" alt=""> <img src="upload/jiantou2.png" alt=""></div>
                <div class="style_2">ES6的新语法，箭头函数</div>
                <div><img src="upload/jiantou3.png" alt=""></div>
                <div><img src="upload/jiantou4.png" alt=""></div>
                <div class="style_2">在箭头函数中如果方法体只有一条语句，大括号可以省略 但是return要去掉</div>
                <div><img src="upload/jiantou5.png" alt=""></div>
                <div class="style_2">在箭头函数中，如果方法只有一条语句，并且还是返回语句</div>
                <div class="style_2">在去掉大括号的同事，必须要去掉return</div>
                <div class="style_2">在箭头函数中，如果方法只有一个参数，小括号可以省略</div>
                <div><img src="upload/jiantou6.png" alt=""></div>
                <div><img src="upload/jiantou7.png" alt=""></div>
                 























            </div>

























            <a href="#" id="zuixia">
                <div class="huojian"><img src="images/huojian.png" alt=""></div>
            </a>
</body>

</html>